<template>
  <div class="product_detail">
    <div class="pd_main">
      <div class="pd_bg" :class="result.type == 1 ? '_height':'' "></div>
      <div class="content">
        <div class="top_card" >
          <div class="records_item_title">{{result.className}}</div>
          <div class="records_item_detail">
            <div class="shengyu" v-if="from !== 'orderCourseList'">
              <div class="detail_title">现价</div>
              <div class="num mainColor">{{result.price}}</div>
            </div>
          </div>
        </div>
        <div class="bot_list">
          <p v-html="result.remarks2"></p>
        </div>
      </div>

    </div>
    <div class="bottom mainBgColor" @click="orderCourse(result.courseStatus)" v-if="(from != 'home' || from != 'teacher') && (result.type == 1 )">
      {{result.courseStatus == null ? '立即报名' : (result.courseStatus == 0 ? '已报名' : '已确认')}}
    </div>
    <OrderModel ref="OrderModel" @reload="reLoad" v-if="result.type == 1" />
  </div>
</template>

<script>
import OrderModel from '@/components/orderModel.vue'
  export default {
    components: {OrderModel},
    data() {
      return {
        id: '',
        from: '',
        result: {}
      }
    },
    created() {
      console.log(this.$route, 1111)
      this.id = this.$route.params.id
      this.from = this.$route.params.from ? this.$route.params.from : ''
      this.getData()
    },
    methods: {
      reLoad() {
        this.getData()
      },
      getData() {
        this.$http.getCourseDetail({id: this.id, openId: localStorage.getItem('px_user_openid')}).then(res => {
          console.log(res)
          this.result = res.data.result

        }).catch(err => {
          console.log(err, 'err')
          this.$toast(err.data.message)
        })
      },
      orderCourse(e) {
        if (e == null) {
          this.$refs.OrderModel.show = true
          this.$refs.OrderModel.id = this.id
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .product_detail {
    width: 100%;
    height: 100%;
    // overflow: scroll;
    display: flex;
    flex-direction: column;
    color: #333;
    .pd_main {
      flex: 1;
      position: relative;
      padding-top: 30px;
      box-sizing: border-box;
      overflow: scroll;
      .pd_bg {
        width: 100%;
        height: 80px;
        position: absolute;
        left: 0px; top: 0px;
        background: rgba(241, 241, 249, 0.5);
        border-radius: 0px 0px 20px 20px;
      }
      ._height {
        height: 65px !important;
      }
      .content {
        width: calc(100% - 40px);
        margin-left: 20px;
        position: relative;
        min-height: 200px;
        border-radius: 4px;
        // background: #F6F8FC;
        .top_card {
          width: 100%;
          box-shadow: 0 4px 15px 0 rgba(0,0,0,0.09);
          border-radius: 4px;
          background: #fff;
          padding: 20px 20px 10px;
          box-sizing: border-box;
          .records_item_title {
            width: 100%;
            height: 25px;
            margin-bottom: 5px;
            text-align: left;
            color: #09122B;
            font-weight: 700;
          }
          .records_item_detail {
            flex: 1;
            display: flex;
            align-items: center;
            .shengyu {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
            .num {
              font-size: 16px;
              font-weight: 400;
              color: #2C2834;
              // margin-bottom: 8px;
            }
            .detail_title {
              font-size: 12px;
              color: #9DA0AA;
            }
          }
        }
        .bot_list {
          padding: 20px 0px;
          box-sizing: border-box;
        }
      }
      .item {
        height: 40px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        .left {
          width: 30%;
          height: 100%;
          color: #999;
          padding-bottom: 10px;
          box-sizing: border-box;
          display: flex;
          align-items: flex-end;
          justify-content: flex-start;
        }
        .right {
          width: calc(75% - 10px);
          padding-bottom: 10px;
          box-sizing: border-box;
          height: 100%;
          display: flex;
          align-items: flex-end;
          justify-content: flex-start;
        }

      }
    }
    .bottom {
      width: calc(100% - 40px);
      height: 44px;
      margin: 10px 20px 40px;
      border-radius: 4px;
      color: #fff;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>
